<script setup>
import {defineEmits, inject,  reactive, ref, watch} from "vue";

//================================================【组件通信】============================================================
//编辑内容，父组件传来已有值
const props = defineProps({
    editValue: String,
})

//控制 编辑页签  组件 隐藏与显示
const editComponentVisiable = inject('editComponentVisiable')
//请求工具
const context = inject('context')
//当前模型ID
const {currAbcModelGuid} = inject('abcmodel')

// 编辑确认
const emits = defineEmits(['selfConfirmReturnParam']);


//================================================【公用相关】============================================================
//表单绑定信息
const editArr = reactive({localEditValue:''})

//================================================【组件属性】============================================================
watch(()=>editComponentVisiable.value,(newValue)=>{
    if (newValue) {
        editArr.localEditValue = props.editValue;
    }
})

//================================================【普通方法】============================================================
//==================================================================【表单验证相关】
const driverGroupFormRules = {
    localEditValue: [
        {
            required: true,
            message: '请输入动因分组名称',
        },
        {
            asyncValidator: (rule, value) => {
                return new Promise((resolve, reject) => {
                    if (value.length > 50) {
                        reject('动因分组名称长度不能超过50个字符')
                    } else if (/\.$/.test(value)) {
                        reject('动因分组名称不能以.结尾')
                    } else if (/[/\\*<>"'\\|?:]/.test(value)) {
                        reject('动因分组名称不能包含\\ 、/ 、: 、* 、? 、" 、\' 、< 、> 、|中任意字符')
                    } else {

                        context.getPlugin('http').get(`abc/model/driverGroup/list/${currAbcModelGuid.value}`).then((res)=>{
                            const existedTabArr = res.data
                            const findIndex = existedTabArr.findIndex(preFindItem=>{
                                return preFindItem.title === value
                            })

                            if (findIndex !== -1 && props.editValue !== value){
                                reject('当前动因分组名称已存在')
                            }else {
                                resolve()
                            }
                        })

                    }
                })
            }
        }

    ]
}
const driverGroupForm = ref(null)
//==================================================================【编辑确定】
//确定按钮加载状态
const editConfirmLoading = ref(false)
function editConfirm() {
    if (editConfirmLoading.value) {
        return
    }
    //加载状态开始
    editConfirmLoading.value = true
    driverGroupForm.value.validate().then(validateResult => {
        if (!validateResult) {
            emits('selfConfirmReturnParam', editArr.localEditValue)
            editArr.localEditValue = ''
            editComponentVisiable.value = false
            //加载状态结束
            editConfirmLoading.value = false
        }else {
            //加载状态结束
            editConfirmLoading.value = false
        }
    });
}
//==================================================================【编辑取消】
function cancelAction(){
    editArr.localEditValue = ''
    editComponentVisiable.value = false
}
//================================================【生命周期】============================================================
</script>

<template>
    <j-modal v-model="editComponentVisiable"
             title="动因分组名称"
             :fullscreenable='false'
             :mask-closable="false"
             :mask="false"
             async
    >
        <j-modal-content size="small" class="modalContent">
            <j-form
                ref="driverGroupForm"
                :model="editArr"
                :rules="driverGroupFormRules"
                label-position="right"
                :label-width="100">
                <j-form-item label="分组名称" prop="localEditValue">
                    <j-input v-if="editComponentVisiable" v-model="editArr.localEditValue"  style="width: 280px" auto-focus></j-input>
                </j-form-item>
            </j-form>
        </j-modal-content>
        <template #footer>
            <j-space style="justify-content: flex-end">
                <j-button @click="cancelAction" :disabled='editConfirmLoading'>取消</j-button>
                <j-button type="primary" :loading='editConfirmLoading' @click="editConfirm">确定</j-button>
            </j-space>
        </template>
    </j-modal>
</template>

<style scoped>
.modalContent{
     height: 75px ;
     padding: 1.5em 1.5em 0px;
}
</style>
